<template>
  <view class="add-project">
    <view class="form-box">
      <view class="form-item">
        <view class="item-label">网关编号</view>
        <view class="item-content"><input placeholder="请输入网关编号" disabled v-model="gatewayNumber"/></view>
        <i class="operate-icon iconfont icon-scan" @click="scanQR()"/>
      </view>
      <view class="form-item">
        <view class="item-label">项目名称</view>
        <view class="item-content"><input placeholder="请输入项目名称" v-model="projectName" /></view>
      </view>
      <view v-if="isAdmin" class="form-item" @click="chooseProjectOwner()">
        <view class="item-label">负责人</view>
        <view class="item-content" :class="{'placeholder': !projectOwnerName}">{{ projectOwnerName || '请输入负责人' }}</view>
        <i class="operate-icon iconfont icon-head-user" />
      </view>
      <view class="form-item">
        <view class="item-label">项目地址</view>
        <view class="item-content"><input placeholder="请选择项目地址" v-model="projectAddress" /></view>
        <i class="operate-icon location iconfont icon-location" @click="chooseProjectAddr()" />
      </view>
      <view class="form-item">
        <view class="item-label">最大功率</view>
        <view class="item-content"><input placeholder="请输入最大功率" v-model="maxPower" /></view>
      </view>
      <view class="form-item">
        <view class="item-label">原灯平均功率</view>
        <view class="item-content"><input placeholder="请输入原灯平均功率" v-model="avgOriginalPower" /></view>
      </view>
    </view>
    <view class="submit-btn" @click="doSubmit()">确定</view>
  </view>
</template>

<script>
import mixin from '@/mixins/index.js'
import { CONFIG } from '@/envs/_/config'
import { getParamByQr } from '@/utils/index.js'
const chooseLocation = requirePlugin('chooseLocation');
export default {
  mixins: [mixin],
  data() {
    return {
      isAdmin: false,
      userInfo: {},
      addByQr: false,
      gatewayNumber: '',
      projectName: '',
      projectOwnerName: '',
      projectOwnerId: '',
      projectAddress: '',
      maxPower: '',
      avgOriginalPower: '',
      loading: false
    };
  },
  onLoad() {
    const self = this
    self.gatewayNumber = self.params.gatewayId || ''
    self.addByQr = !!self.gatewayNumber
    if (self.addByQr) {
      self.projectOwnerName = self.userInfo.name
      self.projectOwnerId = self.userInfo.id
    }
  },
  onShow() {
    const self = this
    const location = chooseLocation.getLocation()
    if (location) {
      console.log(location)
      self.projectAddress = location.address
    }
  },
  onUnload() {
    chooseLocation.setLocation(null)
  },
  methods: {
    scanQR() {
      const self = this
      uni.scanCode({
        scanType: ['qrCode'],
      	success(res) {
          console.log(res)
          const qrGatewayId = getParamByQr(res.result, 'gw')
          if (qrGatewayId.length > 3) {
            self.gatewayNumber = qrGatewayId
          } else {
            uni.showToast({
              icon: 'none',
              title: '无效的二维码'
            })
          }
      	},
        fail(e) {
          if (!e.errMsg?.includes('cancel')) {
            uni.showToast({
              icon: 'none',
              title: '无效的二维码'
            })
          }
        }
      });
    },
    chooseProjectOwner() {
      uni.navigateTo({
        url: '/pages/index/user-list/user-list'
      })
    },
    chooseProjectAddr() {
      const key = CONFIG.MAP_KEY
      const referer = CONFIG.PROJECT_NAME
      wx.navigateTo({
        url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer
      })
    },
    checkCanSubmit() {
      const self = this
      if (self.loading) return false;
      if (!self.gatewayNumber) {
        uni.showToast({
          icon: 'none',
          title: '请输入网关编号'
        })
        return false
      }
      if (!self.projectName) {
        uni.showToast({
          icon: 'none',
          title: '请输入项目名称'
        })
        return false
      }
      if (!self.projectAddress) {
        uni.showToast({
          icon: 'none',
          title: '请输入项目地址'
        })
        return false
      }
      if (!self.maxPower) {
        uni.showToast({
          icon: 'none',
          title: '请输入最大功率'
        })
        return false
      }
      if (!self.avgOriginalPower) {
        uni.showToast({
          icon: 'none',
          title: '请输入原灯平均功率'
        })
        return false
      }
      return true
    },
    doSubmit() {
      const self = this
      if (self.checkCanSubmit()) {
        self.submit()
      }
    },
    submit() {
      const self = this
      self.loading = true
      const data = {
        gateway_id: self.gatewayNumber,
        name: self.projectName,
        address: self.projectAddress,
        power: self.maxPower,
        power0: self.avgOriginalPower
      }
      data.user_id = self.projectOwnerId || self.userInfo.id
      uni.request({
        url: '/project/add',
        method: 'POST',
        data,
        success(result) {
          if (result.data.success) {
            uni.showToast({
              icon: 'success',
              title: '保存成功'
            })
            self.goBack()
          }
        },
        complete() {
          self.loading = false
        }
      })
    },
    goBack() {
      uni.navigateBack()
    }
  }
};
</script>

<style lang="scss" scoped>
.add-project {
  min-height: 100vh;
  background-color: $white;
  padding: 10rpx 30rpx 120rpx;
  .form-box {
    .form-item {
      height: 100rpx;
      border-bottom: 2rpx solid $border-base;
      padding: 20rpx 50rpx 20rpx 150rpx;
      position: relative;
      display: flex;
      align-items: center;
      .item-label {
        position: absolute;
        left: 0;
        font-size: $font-size-3;
        font-weight: bold;
      }
      .item-content {
        text-align: right;
        width: 100%;
        font-size: $font-size-2;
        &.placeholder {
          color: $text-placeholder;
        }
      }
      .operate-icon {
        position: absolute;
        right: 0;
        font-size: $font-size-6;
        color: $primary;
        &.location {
          color: $success;
        }
        &:after {
          position: absolute;
          content: '';
          display: block;
          left: -10rpx;
          right: -10rpx;
          top: -10rpx;
          bottom: -10rpx;
        }
      }
    }
  }
  .submit-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: $primary;
    color: $white;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: $font-size-4;
  }
}
</style>
